<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head th:replace="~{commons/common::head('订单中心')}">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"/>
        <!-- 图标 -->
        <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.css">
        <link rel="stylesheet" th:href="@{/css/common.css}" href="../static/css/common.css">
        <title>订单中心</title>
    </head>
    <body>
        <!-- 顶部 -->
        <div th:replace="~{commons/common::navbar(3)}" class="header bg-white mb-3 shadow-sm"></div>

        <div class="main">
            <div class="container">
                <table class="table table-hover">
                    <h3 class="text-primary text-center">订单列表</h3>
                    <thead>
                        <tr>
                            <th>景点名称</th>
                            <th>昵称</th>
                            <th>姓名</th>
                            <th>手机号</th>
                            <th>门票使用时间</th>
                            <th>订单流水号</th>
                            <th>订单金额</th>
                            <th>订单状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr th:each="order : ${orderPage.records}">
                            <td th:text="${order.siteScenic.siteName}">华山</td>
                            <td th:text="${session.USER.userNickname}">阿骏</td>
                            <td th:text="${session.USER.userRealName}">李骏</td>
                            <td th:text="${session.USER.userPhone}">13152022519</td>
                            <td th:text="${#temporals.format(order.orderUseTime, 'yyyy-MM-dd HH:mm')}">2020-7-5</td>
                            <td th:text="${order.orderSequence}">640fde83cc734a96bd77aa92f8b5ee6c</td>
                            <td th:text="${order.orderPrice}">1000</td>
                            <td th:class="${order.orderStatus ? 'text-primary' : 'text-warning'}"
                                th:text="${order.orderStatus ? '已支付' : '未支付'}">未支付
                            </td>
                            <td>
                                <button th:onclick="buyOrder([[${order.orderId}]])" th:if="${!order.orderStatus}"
                                        class="btn btn-sm btn-primary">
                                    支付
                                </button>
                                <button th:if="${order.orderStatus}" class="btn btn-sm disabled">
                                    已付
                                </button>
                                <button th:onclick="deleteOrder([[${order.orderId}]])" class="btn btn-sm btn-danger">
                                    删除
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <nav aria-label="Page navigation example" class="mt-3 float-right"
                     th:object="${orderPage}" th:if="${orderPage.pages > 1}">
                    <ul class="pagination">
                        <li class="page-item" th:classappend="*{!hasPrevious()} ? 'disabled' : ''">
                            <a class="page-link" th:href="@{/order/list(page=1)}" aria-label="Previous">首页</a>
                        </li>
                        <li class="page-item" th:classappend="*{hasPrevious()} ? '' : 'disabled'">
                            <a class="page-link" th:if="*{(current - 1) > 0}"
                               th:href="@{/order/list(page=*{current}-1)}"
                               aria-label="Previous">上一页</a>
                            <a class="page-link" th:if="*{(current - 1) <= 0}" th:href="@{/order/list(page=1)}"
                               aria-label="Previous">上一页</a>
                        </li>
                        <li class="page-item" th:each="page : *{#numbers.sequence(1, pages)}"
                            th:classappend="(${page}==*{current})?'active':''">
                            <a class="page-link" th:href="@{/order/list(page=${page})}" th:text="${page}">1</a>
                        </li>
                        <li class="page-item" th:classappend="*{hasNext()} ? '' : 'disabled'">
                            <a class="page-link" th:if="*{(current + 1) < pages}"
                               th:href="@{/order/list(page=*{current}+1)}"
                               aria-label="Previous">下一页</a>
                            <a class="page-link" th:if="*{(current + 1) >= pages}"
                               th:href="@{/order/list(page=*{pages})}"
                               aria-label="Previous">下一页</a>
                        </li>
                        <li class="page-item" th:classappend="*{!hasNext()} ? 'disabled' : ''">
                            <a class="page-link" th:href="@{/order/list(page=*{pages})}" aria-label="Previous">末页</a>
                        </li>
                    </ul>
                    <div class="text-primary text-center">
                        <span>第 <span th:text="*{current}">1</span> 页</span>
                        /
                        <span>共 <span th:text="*{pages}">10</span> 页</span>
                    </div>
                </nav>
            </div>
        </div>

        <!-- 底部 -->
        <!--<footer th:fragment="footer" class="navbar-fixed-bottom mt-5 text-muted small"
                style="position:fixed; bottom: 0; width: 100%">
            <div class="bg-dark text-center">
                <div class="p-1">欢迎来西安旅游</div>
                <div class="p-1">邮箱: 1241088536@qq.com</div>
                <div class="p-1">备案号: 陕xxxxx</div>
            </div>
        </footer>-->

        <th:block th:replace="~{commons/common::commonJs}"/>
        <script src='https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js'></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"></script>
        <script th:src="@{/js/bootstrapQ.js}" src='../static/js/bootstrapQ.js'></script>
        <script th:inline="javascript">
            // 支付订单
            function buyOrder(orderId) {
                bootstrapQ.confirm({msg: '立即支付?'},
                    function () {
                        let req = {};
                        req.orderId = orderId;
                        $.ajax({
                            url: /*[[@{/order/buyOrder.do}]]*/'',
                            method: 'POST',
                            dataType: 'json',
                            data: JSON.stringify(req),
                            contentType: 'application/json;charset=utf-8',
                            processData: false,
                            success: function (resp) {
                                if (resp.success) {
                                    alert(resp.message);
                                    location.reload();
                                } else {
                                    bootstrapQ.msg({msg: resp.message, type: 'warning', time: 3000});
                                }
                            },
                            error: function (error) {
                                bootstrapQ.msg({msg: resp.message, type: 'danger', time: 3000});
                            }
                        })
                    }
                );
            }

            // 删除订单
            function deleteOrder(orderId) {
                bootstrapQ.confirm({title: "警告", msg: '此操作将永久删除此订单，确认删除?'},
                    function () {
                        let req = {};
                        req.orderId = orderId;
                        $.ajax({
                            url: /*[[@{/order/deleteOrder.do}]]*/'',
                            method: 'POST',
                            dataType: 'json',
                            data: JSON.stringify(req),
                            contentType: 'application/json;charset=utf-8',
                            processData: false,
                            success: function (resp) {
                                if (resp.success) {
                                    alert(resp.message);
                                    location.reload();
                                } else {
                                    bootstrapQ.msg({msg: resp.message, type: 'warning', time: 3000});
                                }
                            },
                            error: function (error) {
                                bootstrapQ.msg({msg: "网络异常 => " + error, type: 'danger', time: 3000});
                            }
                        })
                    }
                );
            }
        </script>
    </body>
</html>